<template>
  <!-- 订单详情 -->
  <div class="order-details">
    <div class="order-details-header">
      <!-- 返回按钮 - 只在从支付页面进入时显示 -->
      <div class="back-btn" @click="goBack" v-if="isGoToHome">
        <wd-icon name="arrow-left" size="16" class="back-icon"></wd-icon>
        <span class="back-text">回到首页</span>
      </div>

      <!-- 倒计时提示 -->
      <div class="countdown-section" v-if="showActionButtons">
        <div class="countdown-card">
          <div class="countdown-icon">
            <wd-icon name="clock" size="20" class="icon"></wd-icon>
          </div>
          <div class="countdown-content">
            <!-- <div class="countdown-text">支付剩余时间</div> -->
            <div class="countdown-time">请在{{ formatTime(countdownTime) }}内支付</div>
          </div>
          <div class="countdown-warning" v-if="countdownTime <= 300">
            <wd-icon name="warning" size="16" class="warning-icon"></wd-icon>
            <span>即将超时</span>
          </div>
        </div>
      </div>

      <!-- 状态部分 -->
      <div class="status-section">
        <div class="status-card">
          <div class="status-icon">
            <wd-icon :name="getOrderStatusIcon(orderInfo.status)" size="24" class="icon"></wd-icon>
          </div>
          <div class="status-content">
            <div class="status-text">{{ getOrderStatusText(orderInfo.status) }}</div>
            <div class="status-desc">感谢您的信任</div>
          </div>
          <div class="status-badge" :class="getOrderStatusClass(orderInfo.status)">
            {{ getOrderStatusBadge(orderInfo.status) }}
          </div>
        </div>
      </div>
      <!-- 订单号部分 -->
      <div class="order-number-section">
        <div class="label">订单编号</div>
        <div class="number-row">
          <text class="number text-ellipsis">{{ orderInfo.orderNo }}</text>
          <div class="copy-btn" @click="copyOrderNo">复制</div>
        </div>
      </div>
    </div>
    <div class="order-details-Evaluation" v-if="orderInfo.status === 'COMPLETED' && !orderInfo.commentStatus">
      <div class="left">您对该订单满意吗</div>
      <div class="right" @click="goToEvaluation">去评价></div>
    </div>
    <div class="order-details-info">
      <div class="title">订单信息</div>
      <div class="contert">
        <div class="left">收货人</div>
        <div class="right">{{ orderInfo.address?.contactName }}</div>
      </div>
      <div class="contert">
        <div class="left">配送地址</div>
        <div class="right">{{ orderInfo.address?.contactAddress }}</div>
      </div>
      <div class="contert">
        <div class="left">联系电话</div>
        <div class="right">{{ formatPhoneNumber(orderInfo.address?.contactPhone) }}</div>
      </div>
      <div class="contert" v-if="orderInfo.status != null">
        <div class="left">配送骑手</div>
        <div class="right" v-if="orderInfo.distributionName">{{ orderInfo.distributionName?.charAt(0) || '待分配' }}</div>
        <div class="right" v-else>待分配</div>
      </div>
      <div class="contert" v-if="orderInfo.status != null">
        <div class="left">骑手号码</div>
        <div class="right">{{ formatPhoneNumber(orderInfo.distributionPhone) }}</div>
        <div style="margin-left: auto;" @click="contactCustomer(orderInfo.distributionPhone)"
          v-if="orderInfo.distributionPhone">
          <span>📞</span>
        </div>
      </div>
      <div class="page-line"></div>
      <div class="contert">
        <div class="left">订单号</div>
        <div class="right text-ellipsis">{{ orderInfo.orderNo }}</div>
      </div>
      <div class="contert">
        <div class="left">下单时间</div>
        <div class="right">{{ orderInfo.createTime }}</div>
      </div>
      <div class="contert">
        <div class="left">支付方式</div>
        <div class="right">{{ getPayWayText(orderInfo.payWay) }}</div>
      </div>
    </div>

    <div class="order-details-Commodity">
      <div class="title">订单费用</div>
      <div class="header">
        <div class="left">{{ orderInfo.shopName }}</div>
        <div class="right" @click="goToMerchant">{{ shoppingCartIds ? '已收藏' : '收藏' }}</div>
        <div style="margin-left: 20rpx;" @click="contactCustomer(orderInfo.shopPhone)" v-if="orderInfo.shopPhone">
          <span>📞</span>
        </div>
      </div>
      <div class="content">
        <template v-for="item in orderGoods" :key="item.id">
          <div class="content-item">
            <img :src="item.thumbnail" alt="">
            <div class="right">
              <div class="top">
                <div class="top-left">{{ item.goodsName }}</div>
                <div class="top-right"> <span>￥</span><span>{{ item.priceStr }}</span></div>
              </div>
              <!-- 修改这部分 -->
              <div class="center">
                <div class="spec-list" v-if="item.goodsSpecsList && item.goodsSpecsList.length > 0">
                  <div class="spec-item" v-for="(spec, index) in item.goodsSpecsList" :key="index">
                    <span class="spec-name">{{ spec.specsName }}</span>
                    <span class="spec-price">+¥{{ spec.specsPriceStr }}</span>
                  </div>
                </div>
                <!-- 如果没有规格列表，显示原始描述 -->
                <template v-else>
                  {{ item.skuDesc }}
                </template>
              </div>
              <div class="bottom">x{{ item.goodsNum }}</div>
            </div>
          </div>
        </template>
      </div>
      <div class="Delivery">
        <div class="Delivery-left">配送费</div>
        <div class="Delivery-right"><span>￥</span> <span>{{ orderInfo.customerDistributionFeeStr || '0.00' }}</span>
        </div>
      </div>
      <div class="Delivery">
        <div class="Delivery-left">打包费</div>
        <div class="Delivery-right"><span>￥</span> <span>{{ orderInfo.needPayAmountStr || '0.00' }}</span></div>
      </div>
      <!-- <div class="Delivery">
        <div class="Delivery-left">服务费</div>
        <div class="Delivery-right"><span>￥</span> <span>{{ orderInfo.actualPayAmountStr || '0.00' }}</span></div>
      </div> -->
      <div class="page-line"></div>
      <div class="total" v-if="orderInfo.totalAmountStr">
        <div class="total-left">实付款</div>
        <div class="total-right"><span>￥</span> <span>{{ orderInfo.totalAmountStr }}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部操作按钮 -->
  <div class="bottom-actions" v-if="showActionButtons">
    <div class="action-buttons">
      <!-- <div class="cancel-btn" @click="cancelOrder">
        <span>取消订单</span>
      </div> -->
      <div class="pay-btn" @click="confirmPayment">
        <span>确认支付</span>
      </div>
    </div>
  </div>
  <div class="bottom-actions" v-if="shopType">
    <div class="action-buttons">
      <div class="pay-btn" @click="contactCustomer(orderInfo.deliveryPhone)">
        <span>联系顾客</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'

import { useLoginStore } from '@/stores/login.js'
const loginStore = useLoginStore()
const failOpenId = ref('')
const failOrderId = ref('')
const orderInfo = ref({})
const orderGoods = ref([])
const showBackBtn = ref(false) // 控制返回按钮显示

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    '0': '待接单',
    '1': '商家已接单',
    '2': '待配送',
    '3': '配送中',
    '4': '已完成', // 待评价
    '5': '已完成',
    '6': '已取消',
    '7': '退款中',
    '8': '退款完成',
    '9': '订单已取消',
  }
  return statusMap[status] || '订单未支付'
}

// 获取支付方式文本
const getPayWayText = (payWay) => {
  const payWayMap = {
    'WECHAT': '微信支付',
    'WALLET': '钱包支付',
    'MIXED': '混合支付'
  }
  return payWayMap[payWay] || '在线支付'
}

// 复制订单号
const copyOrderNo = () => {
  uni.setClipboardData({
    data: orderInfo.value.orderNo,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      })
    }
  })
}
const contactCustomer = (phone) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone,
      fail: () => {
        uni.showToast({
          title: '拨打电话失败',
          icon: 'none'
        })
      }
    })
  }
}
// 跳转到评价页面
const goToEvaluation = () => {
  uni.navigateTo({
    url: `/pages/evaluation/index?orderId=${orderInfo.value.orderId}`
  })
}
const formatPhoneNumber = (phone) => {
  if (!phone || phone.length < 7) return phone
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
// 获取订单详情
const getInfo = async (id) => {
  try {
    const { data } = await Fetch(`shopping/order/findOrderInfo`, {
      method: 'GET',
      data: {
        orderId: id
      }
    })

    if (data.code === 200) {
      orderInfo.value = data.data
      // 这里假设订单商品列表在 data.data.orderGoods 中
      orderGoods.value = data.data.orderGoodsList || []
      failOrderId.value = data.data.orderId
      failOpenId.value = loginStore.openId
      if (data.data.status == null) {
        showBackBtn.value = true
      }
      if (orderInfo.value.createTime && showActionButtons.value) {
        const createTime = new Date(orderInfo.value.createTime).getTime();
        const currentTime = Date.now();
        const timeDiff = Math.max(createTime + 900000 - currentTime, 0); // 确保不为负数
        countdownTime.value = Math.floor(timeDiff / 1000); // 秒
      }
      // 启动倒计时
      startCountdown();
      checkIsCollected()
    } else {
      uni.showToast({
        title: data.message || '获取订单详情失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    uni.showToast({
      title: '获取订单详情失败',
      icon: 'none'
    })
  }
}
// 检查店铺是否已收藏
const shoppingCartIds = ref('') // 收藏店铺id
const checkIsCollected = async () => {
  try {
    const res = await Fetch(`shopping/collection/list`, {
      method: 'get',
    })

    if (res.data.code === 200 && res.data.rows) {
      shoppingCartIds.value = res.data.rows.some(item => item.shopId === orderInfo.value.shopId)
    }
  } catch (error) {
    console.error('获取收藏状态失败:', error)
  }
}
const goToMerchant = () => {
  uni.navigateTo({
    url: `/pages/Merchant?shopId=${orderInfo.value.shopId}`
  })
}

// 收藏店铺
const toggleCollect = async () => {
  try {
    if (shoppingCartIds.value) {
      // 取消收藏
      const res = await Fetch(`shopping/collection/cancel/${shopId.value}`, {
        method: 'delete',
      })

      if (res.data.code === 200) {
        shoppingCartIds.value = false
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    } else {
      // 添加收藏
      const res = await Fetch(`shopping/collection/add`, {
        method: 'post',
        data: {
          shopId: shopId.value
        }
      })

      if (res.data.code === 200) {
        shoppingCartIds.value = true
        uni.showToast({
          title: '已收藏',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    uni.showToast({
      title: '操作失败，请稍后再试',
      icon: 'none'
    })
  }
}


// 返回到首页
const goBack = () => {
  uni.reLaunch({
    url: '/pages/index'
  })
}

// 获取订单状态图标
const getOrderStatusIcon = (status) => {
  const iconMap = {
    '0': 'clock',
    '1': 'check-circle',
    '2': 'truck',
    '3': 'location',
    '4': 'star',
    '5': 'check-circle-fill',
    '6': 'close-circle',
    '7': 'refresh',
    '8': 'check-circle-fill',
    '9': 'close-circle-fill',
  }
  return iconMap[status] || 'info-circle'
}

// 获取订单状态徽章文本
const getOrderStatusBadge = (status) => {
  const badgeMap = {
    '0': '待处理',
    '1': '进行中',
    '2': '准备中',
    '3': '配送中',
    '4': '已完成', // 待评价
    '5': '已完成',
    '6': '已取消',
    '7': '退款中',
    '8': '已退款',
    '9': '已取消',
  }
  return badgeMap[status] || '未支付'
}

// 获取订单状态样式类
const getOrderStatusClass = (status) => {
  const classMap = {
    '0': 'status-pending',
    '1': 'status-processing',
    '2': 'status-preparing',
    '3': 'status-shipping',
    '4': 'status-comment',
    '5': 'status-completed',
    '6': 'status-cancelled',
    '7': 'status-refunding',
    '8': 'status-refunded',
    '9': 'status-cancelled',
  }
  return classMap[status] || 'status-unknown'
}
// 是否是店铺订单
const shopType = ref(false) // true 是店铺订单，false 是普通订单
const isGoToHome = ref(false)
onLoad((options) => {
  const pages = getCurrentPages();
  if (pages.length === 1) {
    isGoToHome.value = true
  }
  if (options.type === 'shop') {
    shopType.value = true
  }
  if (options.id) {
    getInfo(options.id)
  } else {
    uni.showToast({
      title: '订单ID不存在',
      icon: 'none',
    })
  }

  // 检查是否从支付页面进入
  if (options.from === 'payment') {

    showBackBtn.value = true
    if (options.openid) {
      failOpenId.value = options.openid
    }
    if (options.orderId) {
      failOrderId.value = options.orderId
    }
    console.log(failOrderId.value, 'orderId____________');
    console.log(failOpenId.value, 'openId____________');
  }
})

// 显示操作按钮的条件
const showActionButtons = computed(() => {
  // 只在待支付状态显示按钮
  return showBackBtn.value
})

// 倒计时相关
const countdownTime = ref(900) // 15分钟 = 900秒
const countdownTimer = ref(null)
const isCountdownRunning = ref(false) // 防止重复启动倒计时

// 格式化倒计时时间
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 开始倒计时
const startCountdown = () => {
  // 防止重复启动
  if (isCountdownRunning.value) {
    return
  }

  isCountdownRunning.value = true
  countdownTimer.value = setInterval(() => {
    if (countdownTime.value > 0) {
      countdownTime.value--
    } else {
      // 倒计时结束，自动取消订单
      stopCountdown()
      autoCancelOrder()
    }
  }, 1000)
}

// 自动取消订单
const autoCancelOrder = async () => {
  // 跳转回首页
  setTimeout(() => {
    uni.reLaunch({
      url: '/pages/index'
    })
  }, 1500)
}

// 停止倒计时
const stopCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
    countdownTimer.value = null
  }
  isCountdownRunning.value = false
}

// 重置倒计时
const resetCountdown = () => {
  countdownTime.value = 900
}

// 监听页面显示状态
onMounted(() => {
  // 延迟启动，确保页面完全加载
  setTimeout(() => {
    if (showActionButtons.value && !isCountdownRunning.value) {
      startCountdown()
    }
  }, 100)
})

onUnmounted(() => {
  stopCountdown()
})

// 监听showActionButtons变化
watch(showActionButtons, (newVal, oldVal) => {
  // 只在状态从false变为true时启动倒计时
  if (newVal && !oldVal && !isCountdownRunning.value) {
    resetCountdown()
    startCountdown()
  } else if (!newVal && oldVal) {
    stopCountdown()
  }
}, { immediate: false })

// 确认支付
const confirmPayment = () => {
  uni.showModal({
    title: '确认支付',
    content: '确定要支付该订单吗？',
    success: (res) => {
      if (res.confirm) {
        // 发起支付
        retryPayment()
      }
    }
  })
}
const retryPayment = async () => {
  console.log(failOrderId, 'orderId');

  const orderId = failOrderId.value
  const openid = failOpenId.value
  // 支付订单创建
  const PaymentObj = await Fetch('shopping/pays/wechatJsapi', {
    method: 'get',
    data: {
      orderId,
      openid,
    }
  })
  const payData = PaymentObj.data.value
  // 3. 调起微信支付
  wx.requestPayment({
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.package,
    signType: payData.signType,
    paySign: payData.paySign,
    success() {
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })

      // 清空购物车数据
      uni.removeStorageSync('cartData')

      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/OrderDetails?id=' + orderId
        })
      }, 1000)
    },
    fail(err) {
      uni.showToast({
        title: '支付失败',
        icon: 'none',
      })
    },
  });
}

</script>

<style lang="scss" scoped>
.order-details {
  background: #F5F5F5;
  min-height: 100vh;
  padding-bottom: 150rpx;

  &-header {
    background: linear-gradient(180deg, #FBE050 0%, #FFFFFF 100%);
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    border-radius: 0 0 30rpx 30rpx;

    // 返回按钮样式
    .back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12rpx 24rpx;
      margin-bottom: 30rpx;
      background: rgba(255, 255, 255, 0.9);
      border: 2rpx solid rgba(251, 224, 80, 0.8);
      border-radius: 50rpx;
      box-shadow: 0 4rpx 12rpx rgba(251, 224, 80, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      backdrop-filter: blur(10rpx);
      min-width: 160rpx;

      &:hover {
        background: rgba(251, 224, 80, 0.9);
        border-color: #FBE050;
        box-shadow: 0 6rpx 20rpx rgba(251, 224, 80, 0.3);
        transform: translateY(-2rpx);
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 2rpx 8rpx rgba(251, 224, 80, 0.3);
      }

      .back-icon {
        margin-right: 8rpx;
        color: #333333;
        transition: color 0.3s ease;
      }

      .back-text {
        font-size: 26rpx;
        color: #333333;
        line-height: 36rpx;
        font-weight: 500;
        transition: color 0.3s ease;
      }

      &:hover .back-icon,
      &:hover .back-text {
        color: #2c2c2c;
      }
    }

    // 状态部分
    .status-section {
      margin-bottom: 40rpx;

      .status-card {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20rpx;
        padding: 32rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(20rpx);
        border: 1rpx solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4rpx;
          background: linear-gradient(90deg, #FBE050 0%, #FFD700 100%);
        }

        .status-icon {
          width: 80rpx;
          height: 80rpx;
          background: linear-gradient(135deg, #FBE050 0%, #FFD700 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 24rpx;
          box-shadow: 0 4rpx 16rpx rgba(251, 224, 80, 0.3);

          .icon {
            color: #333333;
          }
        }

        .status-content {
          flex: 1;

          .status-text {
            font-size: 40rpx;
            font-weight: 600;
            color: #1a1a1a;
            line-height: 56rpx;
            margin-bottom: 8rpx;
            letter-spacing: 0.5rpx;
          }

          .status-desc {
            font-size: 24rpx;
            color: #8a8a8a;
            line-height: 34rpx;
            font-weight: 400;
          }
        }

        .status-badge {
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
          font-size: 22rpx;
          font-weight: 500;
          line-height: 30rpx;
          text-align: center;
          min-width: 80rpx;

          &.status-pending {
            background: linear-gradient(135deg, #FFF3CD 0%, #FFEAA7 100%);
            color: #856404;
            border: 1rpx solid #FFE082;
          }

          &.status-processing,
          &.status-preparing {
            background: linear-gradient(135deg, #D1ECF1 0%, #B3E5FC 100%);
            color: #0C5460;
            border: 1rpx solid #81D4FA;
          }

          &.status-shipping {
            background: linear-gradient(135deg, #D4EDDA 0%, #C8E6C9 100%);
            color: #155724;
            border: 1rpx solid #A5D6A7;
          }

          &.status-completed {
            background: linear-gradient(135deg, #D4EDDA 0%, #A8E6CF 100%);
            color: #155724;
            border: 1rpx solid #81C784;
          }

          &.status-cancelled,
          &.status-refunded {
            background: linear-gradient(135deg, #F8D7DA 0%, #FFCDD2 100%);
            color: #721C24;
            border: 1rpx solid #EF9A9A;
          }

          &.status-comment {
            background: linear-gradient(135deg, #E2E3E5 0%, #F5F5F5 100%);
            color: #383D41;
            border: 1rpx solid #BDBDBD;
          }

          &.status-refunding {
            background: linear-gradient(135deg, #FFF3CD 0%, #FFEAA7 100%);
            color: #856404;
            border: 1rpx solid #FFE082;
          }
        }
      }
    }

    // 订单号部分
    .order-number-section {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16rpx;
      padding: 24rpx;

      .label {
        font-size: 24rpx;
        color: #999999;
        line-height: 33rpx;
        margin-bottom: 12rpx;
      }

      .number-row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .number {
          flex: 1;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          margin-right: 20rpx;
        }

        .copy-btn {
          padding: 8rpx 24rpx;
          background: #FBE050;
          border-radius: 24rpx;
          font-size: 24rpx;
          color: #333333;
          line-height: 33rpx;
          text-align: center;
        }
      }
    }
  }

  &-Evaluation {
    width: 710rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 36rpx 30rpx 34rpx;
    box-sizing: border-box;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      height: 40rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #191919;
      line-height: 40rpx;
    }

    .right {
      height: 40rpx;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
    }
  }

  &-info {
    width: 710rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin: 20rpx auto;



    .contert {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 30rpx;

      .left {
        margin-right: 30rpx;
        width: 112rpx;
        height: 40rpx;
        font-weight: 400;
        line-height: 40rpx;
        text-align: left;
      }
    }
  }

  &-Commodity {
    width: 710rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx auto;
    padding: 30rpx;
    box-sizing: border-box;

    .header {
      width: 650rpx;
      height: 62rpx;
      background: #FAFAFA;
      opacity: 0.8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8rpx 20rpx;
      box-sizing: border-box;
      border-radius: 20rpx;

      .left {
        height: 40rpx;
      }

      .right {
        width: 96rpx;
        height: 46rpx;
        background: #FBE050;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        font-size: 24rpx;
        color: #333333;
        line-height: 46rpx;
        text-align: center;
        margin-left: auto;
      }
    }

    .content {
      width: 650rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 20rpx;

      .content-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        image {
          width: 98rpx;
          height: 98rpx;
          border-radius: 14rpx;
          margin-right: 16rpx;
        }

        .right {
          flex: 1;
          font-size: 22rpx;
          color: #999;

          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &-left {
              font-size: 26rpx;
              color: #191919;
            }

            &-right {
              height: 36rpx;
              font-weight: 400;
              font-size: 26rpx;
              color: #191919;
              line-height: 36rpx;

              label {
                &:nth-child(1) {
                  height: 32rpx;
                  font-size: 22rpx;
                  color: #191919;
                  line-height: 32rpx;
                }

                &:nth-child(2) {
                  height: 44rpx;
                  font-size: 32rpx;
                  color: #191919;
                  line-height: 44rpx;
                }
              }
            }
          }

          .center {
            margin: 10rpx 0;

            .spec-list {
              display: flex;
              flex-wrap: wrap;
              gap: 10rpx;

              .spec-item {
                display: flex;
                align-items: center;
                padding: 4rpx 12rpx;
                background: #F5F5F5;
                border-radius: 8rpx;
                font-size: 22rpx;

                .spec-name {
                  color: #666666;
                  margin-right: 8rpx;
                }

                .spec-price {
                  color: #FF6B35;
                  font-weight: 500;
                }
              }
            }
          }

          .bottom {
            font-size: 28rpx;
            color: #666666;
            margin-top: 10rpx;
          }
        }
      }

    }

    .Delivery {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 30rpx;

      &-right {
        label {
          &:nth-child(1) {
            font-size: 22rpx;
          }
        }
      }
    }

    .total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 32rpx;
      font-weight: bold;
      color: #191919;

      &-right {
        font-size: 36rpx;

        label {
          &:nth-child(1) {
            font-size: 22rpx;
          }
        }
      }
    }
  }

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #191919;
    margin-bottom: 30rpx;
  }

  .page-line {
    width: 100%;
    height: 1rpx;
    background: #F1F1F2;
    margin-bottom: 30rpx;
  }

  .text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

// 倒计时样式
.countdown-section {
  width: 710rpx;
  margin: 20rpx auto;

  .countdown-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 24rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #F0F0F0;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: linear-gradient(90deg, #FF6B6B 0%, #FF8E8E 100%);
    }

    .countdown-icon {
      width: 60rpx;
      height: 60rpx;
      background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);

      .icon {
        color: #FFFFFF;
      }
    }

    .countdown-content {
      flex: 1;

      .countdown-text {
        font-size: 24rpx;
        color: #999999;
        line-height: 34rpx;
        margin-bottom: 4rpx;
      }

      .countdown-time {
        font-size: 36rpx;
        font-weight: 600;
        color: #FF6B6B;
        line-height: 50rpx;
        font-family: 'Courier New', monospace;
      }
    }

    .countdown-warning {
      display: flex;
      align-items: center;
      padding: 8rpx 16rpx;
      background: linear-gradient(135deg, #FFF3CD 0%, #FFEAA7 100%);
      border-radius: 20rpx;
      border: 1rpx solid #FFE082;
      margin-left: 20rpx;

      .warning-icon {
        color: #FF9800;
        margin-right: 6rpx;
      }

      span {
        font-size: 22rpx;
        color: #856404;
        font-weight: 500;
      }
    }
  }
}

// 底部操作按钮样式
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  padding: 20rpx 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-radius: 20rpx 20rpx 0 0;

  .action-buttons {
    display: flex;
    gap: 20rpx;

    .cancel-btn,
    .pay-btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: pointer;

      .btn-icon {
        margin-right: 8rpx;
      }
    }

    .cancel-btn {
      background: #F5F5F5;
      color: #666666;
      border: 2rpx solid #E0E0E0;

      &:active {
        background: #E8E8E8;
        transform: scale(0.98);
      }
    }

    .pay-btn {
      background: linear-gradient(135deg, #FBE050 0%, #FFD700 100%);
      color: #333333;
      border: 2rpx solid #FBE050;
      box-shadow: 0 4rpx 12rpx rgba(251, 224, 80, 0.3);

      &:active {
        background: linear-gradient(135deg, #F0D840 0%, #E6C800 100%);
        transform: scale(0.98);
        box-shadow: 0 2rpx 8rpx rgba(251, 224, 80, 0.3);
      }
    }
  }
}
</style>
